<template>
  <div class="input">
    <input
      @input="phonepush"
      :value="modelValue"
      :placeholder="place"
      :type="typeS"
      @blur="phonebtn"
    />
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: ["place", "modelValue", "typeS"],
  setup(props, ext) {
    function phonepush() {
      ext.emit("update:modelValue", event.target.value);
    }
    function phonebtn() {
      ext.emit("blur");
    }
    return {
      phonepush,
      phonebtn,
    };
  },
};
</script>

<style lang="scss" scoped>
.input {
  width: 100%;
  height: 90px;
  background-color: #f5f5f5;
  border-radius: 9px;
  position: relative;
  display: flex;
  align-items: center;
  margin: 40px 0;
  input {
    padding-left: 10px;
    height: 50px;
    width: 75%;
    border: 0;
    outline: none;
    background-color: transparent !important;
    color: #5a5858;
    font-size: 28px;
    -webkit-tap-highlight-color: transparent;
  }
}
</style>
